<template>
<van-nav-bar
    title="编辑地址"
    left-arrow
    @click-left="gotoleft"
  />
<div class="addressEdit-container">
  <div class="tip">请填写您的收货地址</div>
  <van-cell-group :border="false">
    <van-field label="收货人" v-model=" name " placeholder="收货人姓名" />
    <van-field label="手机号码" v-model=" phone " placeholder="请输入手机号码" />
    <van-field label="所在地区" v-model=" area " placeholder="请选择收货地址" readonly @click="showArea" />
    <van-field label="详细地址" v-model=" address " placeholder="请填写街道、楼道" />
  </van-cell-group>
  <div class="default" v-if="type === 'change'">
    <div>默认地址：</div>
    <van-switch :model-value="checked" active-color="#5cb279" size="20px" @update:model-value="onChange" />
  </div>
  <div class="add-btn" v-if="type === 'add'" @click="add">确认添加</div>
  <div class="change-btn" v-if="type==='change'" @click="change">确定修改</div>
  <van-overlay :show="show" @click="show = false">
    <van-area :class="show?'showArea area':'hideArea area'" :area-list="areaList" value="110101"
      @cancel="hideArea" @confirm="selectArea" />
  </van-overlay>
</div>
</template>

<script>
import {
  areaList
} from '../utils/areaList';
import {
  AddAddress,
  UpdateAddress,
  GetAddressDetail
} from '@/api'
import {reactive,toRefs} from 'vue'
import { Toast } from 'vant';
import router from '../router'
export default {
  name: 'edit',
  setup(props) {
    //参数
    let edit = reactive({
      id: '',
      areaList,
      type: 'add',
      name: '',
      phone: '',
      area: '',
      address: '',
      show: false,
      checked: false,
      areaArray:[],
      addressInfo:''
    })
    edit.id = router.currentRoute.value.params.id
    edit.type = router.currentRoute.value.params.type
    if (edit.type === 'change' && edit.id) {
      GetAddressDetail({
        addressId: edit.id
      }).then(res => {
        console.log('get address detail==>', res)
        const obj = res.data
        edit.addressInfo = res.data
        edit.name=obj.userName,
        edit.phone=obj.telNumber,
        edit.area=obj.provinceName + obj.cityName + obj.countyName,
        edit.address=obj.detailInfo,
        edit.checked=obj.isDefault == 0 ? true : false
        edit.cityName = obj.cityName;
        edit.provinceName = obj.provinceName;
        edit.countyName = obj.countyName;
        console.log('edit==>', edit)
      })
    }
    
    function onChange(){
      edit.checked=!edit.checked
    }
    function showArea() {
      edit.show=true
    }
    function hideArea() {
        edit.showArea=false
    }

    function selectArea(data) {
      console.log(data)
      edit.areaArray = data
      edit.area = data.reduce((pre, cur) => {
          return pre + cur.name
        }, '')
      hideArea()
    }
    //手机号格式判断
    const isPhoneNumber = phone => /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/.test(phone)
    //输入格式判断
    function validate() {
    if (edit.name && edit.phone && edit.area && edit.address) {
        if (!isPhoneNumber(edit.phone)) {
          Toast('手机号格式不正确!')
          return false;
        }
        return true;
      }
      Toast('请查看填写是否正确!')
      return false;
    }
    function change() {
        if (validate()) {
          UpdateAddress({
            id: edit.id,
            provinceName: edit.areaArray.length ? edit.areaArray[0].name : edit.addressInfo.provinceName,
            cityName: edit.areaArray.length ? edit.areaArray[1].name : edit.addressInfo.cityName,
            countyName: edit.areaArray.length ? edit.areaArray[2].name : edit.addressInfo.countyName,
            detailInfo: edit.address,
            userName: edit.name,
            telNumber: edit.phone,
            isDefault: edit.checked ? 0 : 1
          }).then(res => {
            console.log('update address=>', res)
            if (res.code === 0) {
              Toast('修改成功')
              router.back()
            }else{
              Toast.fail(res.msg)
            }
          })
      }
    }
    function add() {
      if (validate()) {
        AddAddress({
          userName: edit.name,
          telNumber: edit.phone,
          detailInfo: edit.address,
          provinceName: edit.areaArray[0].name,
          cityName: edit.areaArray[1].name,
          countyName: edit.areaArray[2].name,
        }).then(res => {
          console.log('add address==>', res)
          if (res.code === 0) {
            Toast('修改成功')
            router.back()
          }else{
            Toast.fail(res.msg)
          }
        })
      }
    }
    function gotoleft(){
      router.go(-1)
    }
    //挂载
    return{ ...toRefs(edit),onChange,showArea,hideArea,selectArea,change,add,gotoleft}
  }
}
</script>

<style scoped>
.addressEdit-container{
  padding:30px;
  box-sizing: border-box;
}

.tip{
  margin-left: 30px;
  font-size: 28px;
  color:#c8c9cc;
}

.area{
  position: fixed;
  left:0;
  bottom:0;
  width:100%;
  height: 500px;
  transition: all .3s linear;
}

.showArea{
  bottom:0;
}

.hideArea{
  bottom:-500px;
}

.default{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 30px;
  margin-top: 20px;
  padding-bottom: 20px;
  font-size: 14px;
  color:#757677;
  border-bottom: 1px solid #f5f6f7;
}

.add-btn,
.change-btn{
  width:60%;
  height: 80px;
  margin: 100px auto 0;
  line-height: 80px;
  border-radius: 50px;
  text-align: center;
  color:#ffffff;
  background-color: #31b573;
  box-shadow: inset 0 -4px 5px 3px rgba(138, 202, 157,.8);  
}
</style>